<template>
	<div class="basic-layout">
		<div :class="['nav', isCollapse ? 'fold' : 'unfold']">
			<!-- 系统logo -->
			<div class="logo">
				<img src='../assets/img/logo-small.png' alt=""/>
				<span>HHS_Admin</span>
			</div>

			<!-- 导航菜单 -->
			<el-menu 
				:default-active="activeMenu" 
				class="nav-menu"
			 	background-color="#001529"
			  :router="true" 
				text-color="#fff" 
				:collapse="isCollapse">
				<tree-menu :menuTree="menuTree"/>
			</el-menu>
		</div>

		<div :class="['content', isCollapse ? 'fold' : 'unfold']">
			<div class="top-crumb">
				<div class="top-crumb-left">
					<div class="fold-menu" @click="toggleNav">
						<i class="el-icon-s-operation"></i>
					</div>
					<div class="bread">
						<BreadCrumb />
					</div>
				</div>
				<div class="user-info">
					<el-badge :is-dot="noticeCount > 0 ? true : false" class="notice" type="danger">
						<i class="el-icon-bell"></i>
					</el-badge>

					<el-dropdown @command="handleCommand">
						<span class="username-span">
							{{userInfo.userName}}
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="user">个人中心</el-dropdown-item>
								<el-dropdown-item command="email65">邮箱:{{userInfo.userEmail}}</el-dropdown-item>
								<el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
								<el-dropdown-item command="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<div class="wrapper">
					<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import TreeMenu from './TreeMenu.vue'
import BreadCrumb from "./BreadCrumb.vue";
export default {
	name: "home",
	components:{TreeMenu,BreadCrumb},
	data() {
		return {
			activeMenu: location.hash.slice(1),
			isCollapse: false,
			menuTree: [],
			userInfo:this.$store.state.userInfo,
			noticeCount:0
		}
	},
	mounted() {
		this.getNoticeCount()
		this.getMenuList()
	},
	methods: {
		toggleNav() {
			this.isCollapse = !this.isCollapse
		},
		handleCommand(key) {
			if (key === 'updatePwd') {
				this.$message.success('操作成功')
				this.$router.push('/updatePwd')
			} else if (key === 'logout') {
				this.$message.success('已退出登录')
				this.$storage.clearAll()
				this.$store.commit('saveUserInfo','') //清空用户信息
				this.$store.commit("changeMenuList", ""); //清空菜单列表
        this.$store.commit("changeDeptList", ""); //清空部门列表
				this.userInfo = {}
				this.$router.push('/login')
			}else if (key === 'user') {
				this.$router.push('/user')
			}

		},
		async	getNoticeCount(){
			const res = await this.$api.noticeCount()
			this.noticeCount = res
		},
		async	getMenuList(){
			if(this.menuTree.length === 0) {
					try {
						const res = await this.$api.getMenuList()
						this.menuTree = res
						this.$store.commit('changeMenuList',res.data)
						
				} catch (error) {
						console.error(error);
			}
		}
		
		},
	}
}
</script>

<style lang="scss" scoped>
.basic-layout {
	position: relative;

	.nav {
		position: fixed;
		width: 200px;
		height: 100vh;
		background-color: #001529;
		color: white;
		overflow-y: auto;
		overflow-x: hidden;
		transition: width 0.3s; // 收缩展开过渡动画

		.logo {
			display: flex;
			align-items: center;
			font-size: 18px;
			height: 50px;

			img {
				margin: 0 16px;
				width: 32px;
				height: 32px;
			}
		}

		.nav-menu {
			height: calc(100vh - 50px);
			border-right: none;
		}

		&.fold {
			width: 64px;
		}
		&.unfold {
			width: 200px;
		}
	}

	.content {
		margin-left: 200px;

		&.fold {
			margin-left: 64px;
		}
		&.unfold {
			margin-left: 200px;
		}

		.top-crumb {
			height: 50px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ddd;
			padding: 0 20px;

			.top-crumb-left {
				display: flex;
				align-items: center;
				.fold-menu {
					cursor: pointer;
				}
				.bread {
					margin-left: 10px;
				}
			}

			.user-info {
				.notice {
					margin-right: 20px;
					line-height: 25px;
				}

				.username-span {
					cursor: pointer;
					color: #4091ff;
				}
			}
		}

		.wrapper {
			background: #eef0f3;
			padding: 20px;
			height: calc(100vh - 50px);
			.main {
				background-color: #fff;
				height: 100%;
			}
		}
	}
}
</style>
